#tab-bar.demo {
  display: flex;
  flex-direction: column;
}
#tab-bar .demoName {
  height: 0.975609756097561rem;
}
#tab-bar .demo-preview-item .am-tab-bar {
  background-color: reda;
}
.am-tabs-tab-bar-wrap{
  position: absolute;
  bottom: 0rem;
  width: 100%;
}
.bottom_nategory_list{
  height: 100vh;
}
.main-navigator-app{
  position: relative;
}
.navigator-guide-page{
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 21;
  .navigator-good-clear-start{
      color: #fff;
      position: absolute;
      top: 0rem;
      z-index: 1000;
      .navigator-good-clear-top{
          width: 7.317073170731708rem;
          height: 1.951219512195122rem;
          position: absolute;
          left: -1.048780487804878rem;
          .naviagtor-good-clear-order-top{
              position: absolute !important;
              left: -1.2195121951219512rem;
              top: 8.0rem;
         }
          .naviagtor-guide-page-good-message-top{
              position: absolute;
              width: 4.878048780487805rem;
              height: 3.1219512195121952rem;
              top: 6.7804878048780486rem;
              color: #fff;
              left: 3.5rem;
              line-height: 0.5121951219512195rem;
              border: 0.024390243902439025rem solid #fff;
              border-radius: 0.4878048780487805rem;
              text-indent: 2em;
              padding: 0.4878048780487805rem;
              font-size: 0.34146341463414637rem;
              font-weight: 800;
         }
     }
 }
  .navigator-guide-page-img{
      img{
          width: 1.3658536585365855rem;
          height: 1.2926829268292683rem;
          transform: rotateZ(57deg);
          position: relative;
          bottom: -15.029268rem;
          left: 0.536585rem;
     }
 }
  .naviagtor-guide-page-right{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 4.878048780487805rem;
      height: 4.878048780487805rem;
      position: absolute;
      bottom: -3.368292682926829rem;
      left: 0.536585rem;
      h4{
          color: skyblue;
          font-size: 0.24390243902439024rem;
          text-decoration: underline;
          line-height: 0.24390243902439024rem;
     }
      h3{
          color: #fff;
          font-size: 0.4878048780487805rem;
          line-height: -0.17073170731707318rem;
          height: 1.024390243902439rem;
          display: inline-block;
          border: 0.024390243902439025rem solid #fff;
          border-radius: 0.6341463414634146rem;
          width: 3.97561rem;
          text-align: center;
          position: absolute;
          right: -1.414634rem;
          bottom: 4.560975609756097rem;
          padding-top: 0.17073170731707318rem;
     }
 }
  .navigator-guide-page-order-input{
      img{
          width: 1.3658536585365855rem;
          height: 1.2926829268292683rem;
          transform: rotateZ(-20deg);
          position: relative;
          left: -6.690244rem;
          top: 6.6rem;
     }
 }
  .navigator-guide-page-order-top{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 5.878048780487805rem;
      height: 4.878048780487805rem;
      position: absolute;
      left: 2.5365853658536586rem;
      top: 6.2926829268292686rem;
      h4{
          color: skyblue;
          font-size: 0.24390243902439024rem;
          text-decoration: underline;
          line-height: 0.24390243902439024rem;
     }
      h3{
          color: #fff;
          font-size: 0.4878048780487805rem;
          line-height: -0.17073170731707318rem;
          height: 1.024390243902439rem;
          display: inline-block;
          border-radius: 0.6341463414634146rem;
          width: 3.97561rem;
          text-align: center;
          position: absolute;
          right: 1.585366rem;
          bottom: 4.560975609756097rem;
          padding-top: 0.17073170731707318rem;
          left: 0.21951219512195122rem;
     }
 }
  .navigator-good-clear{
      width: 7.317073170731708rem;
      height: 1.951219512195122rem;
      position: absolute;
      left: -1.048780487804878rem;
 }
  .navigator-good-clear-ok{
      position: absolute !important;
      left: 0rem;
      top: 2.4390243902439024rem;
 }
  .naviagtor-good-clear-order{
      position: absolute !important;
      left: -1.2195121951219512rem;
      top: 8.0rem;
 }
  .naviagtor-guide-page-message{
      position: absolute;
      width: 5.780487804878049rem;
      height: 2.682926829268293rem;
      bottom: 6.097560975609756rem;
      color: #fff;
      left: 1.5365853658536586rem;
      line-height: 0.43902439024390244rem;
      border: 0.024390243902439025rem solid #fff;
      border-radius: 0.4878048780487805rem;
      text-indent: 2em;
      padding: 0.4878048780487805rem;
 }
  .naviagtor-guide-page-good-message{
      position: absolute;
      width: 6.878048780487805rem;
      height: 3.1219512195121952rem;
      top: 6.7804878048780486rem;
      color: #fff;
      left: 0rem;
      line-height: 0.5121951219512195rem;
      border: 0.024390243902439025rem solid #fff;
      border-radius: 0.4878048780487805rem;
      text-indent: 2em;
      padding: 0.4878048780487805rem;
      font-size: 0.34146341463414637rem;
      font-weight: 800;
 }
  .main-navigator-app-tabbar-bottom-background{
      position: absolute;
      width: 2.4390243902439024rem;
      height: 2.4390243902439024rem;
      background: #fff;
 }
  .main-integral-300-goods-navigator {
      margin-top: 0.34146341463414637rem;
      width: 85%;
      height: 4.2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 0.24390243902439024rem;
      line-height: 0.43902439024390244rem;
      margin-left: 0.24390243902439024rem;
      margin-bottom: 0.7073170731707317rem;
      background: linear-gradient( -191deg, #caf1f6, #4caad0);
      position: relative;
      left: -1.951219512195122rem;
      top: 1.2682926829268293rem;
      .main-goods-integral-bottom-h5{
          position: absolute;
          top: 4.121951219512195rem;
          color: #fff;
          left: 0.12195121951219512rem;
          font-size: 0.36585365853658536rem;
     }
      .main-goods-integral-images{
          border-style: none;
          width: 2.926829268292683rem;
          height: 2.6341463414634148rem;
          border-radius: 0.4878048780487805rem;
          margin-top: -0.2926829268292683rem;
          background: #fff;
          img{
              width: 100%;
              height: 107%;
              border-radius: 0.4878048780487805rem;
         }
     }
      h3{
          color: #fff;
          font-size: 0.24390243902439024rem;
          width: 2.1951219512195124rem;
          height: 0.34146341463414637rem;
          line-height: 1.170731707317073rem;
          text-align: center;
          top: 2.7560975609756095rem;
          left: 0.7317073170731707rem;
     }
      .main-integral-top-goods {
          display: flex;
          flex-direction: column;
          h4 {
              font-size: 0.43902439024390244rem;
              color: rgb(25, 144, 199);
              font-weight: 700;
              margin-left: 0rem !important;
              line-height: 0.6829268292682927rem;
              width: 2.4878048780487805rem;
              height: 0.5365853658536586rem;
              overflow: hidden;
              text-align: center;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-top: 0.17073170731707318rem;
         }
          h5 {
              font-size: 0.34146341463414637rem;
              color: rgb(25, 144, 199);
              font-weight: 700;
              margin-left: 0rem !important;
              line-height: 0.6829268292682927rem;
              text-align: center;
         }
     }
      .main-integral-bottom {
          position: absolute;
          width: 2.0390243902439024rem;
          height: 0.43902439024390244rem;
          align-items: center;
          background-color: rgb(25, 145, 198);
          border-radius: 0.07317073170731707rem;
          color: #fff;
          margin-top: 0.1951219512195122rem;
          line-height: 0.43902439024390244rem;
          text-align: center;
          bottom: -0.7073170731707317rem;
          left: 1.9268292682926829rem;
     }
 }
}
.main-integral-content-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.1951219512195124rem;
  position: absolute;
  border-radius: 0.4878048780487805rem;
  left: 4.439024390243903rem;
  top: 4.390243902439025rem;
  img {
      width: 1.3414634146341464rem;
      height: 1.3414634146341464rem;
 }
  h3 {
      font-size: 0.3902439024390244rem;
      line-height: 0.5609756097560976rem;
 }
}
